<template>
  <div class="chart-warper">
    <div>
      <chart class="chart" :options="options" :auto-resize="true"></chart>
    </div>
  </div>
</template>

<script>
    export default {
        name: "pie-chart",
        data:function () {
          return {
            options: {
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                left: 'center',
                bottom: '10',
                data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
              },
              series : [
                {
                  name:'WEEKLY WRITE ARTICLES',
                  type:'pie',
                  radius : '55%',
                  center: ['50%', '50%'],
                  data:[
                    { value: 320, name: 'Industries' },
                    { value: 240, name: 'Technology' },
                    { value: 149, name: 'Forex' },
                    { value: 100, name: 'Gold' },
                    { value: 59, name: 'Forecasts' }
                  ].sort(function (a, b) { return b.value - a.value; }),
                  roseType: 'radius',
                  // label: {
                  //   normal: {
                  //     textStyle: {
                  //       color: 'rgba(0, 0, 0, 0.3)'
                  //     }
                  //   }
                  // },
                  // labelLine: {
                  //   normal: {
                  //     lineStyle: {
                  //       color: 'rgba(0, 0, 0, 0.3)'
                  //     },
                  //     smooth: 0.2,
                  //     length: 10,
                  //     length2: 20
                  //   }
                  // },

                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                    return Math.random() * 200;
                  }
                }
              ]
            }
          }
        }
    }
</script>

<style lang= "scss" scoped>
  .chart-warper {
    padding: 20px;
    background-color: #fff;

    .chart {
      width: auto;
      height: 300px
    }
  }
</style>
